<template>
	<view class="pyg_tabs">
		<view class="pyg_tabs_item" @tap="handleTabClick" :data-id="item.id" v-for="(item,index) in tabs" :key="item.id">
			<view :class="['pyg_tabs_title',item.isActive?'active':'']">
				{{item.value}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabs",
		props: {
			tabs: {
				type: Array,
				value: []
			}
		},
		data() {
			return {

			};
		},
		methods: {
			handleTabClick: function(e) {
				const id = e.currentTarget.dataset.id;
				let tabs = this.tabs;
				tabs.forEach(v => v.id == id ? v.isActive = true : v.isActive = false);
				this.$emit("tabsChange", tabs)
			}
		}
	}
</script>

<style lang="less">
	.pyg_tabs {
		display: flex;
	}

	.pyg_tabs .pyg_tabs_item {
		flex: 1;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pyg_tabs .pyg_tabs_item .pyg_tabs_title {
		padding: 20rpx;
		width: 184rpx;
		text-align: center;
	}

	.pyg_tabs .active {
		border-bottom: 3rpx solid var(--themeColor);
		font-weight: 600;
	}
</style>
